﻿@using Askmethat.Aspnet.JsonLocalizer.Localizer
@inject IDataService DataService
@inject IJsonStringLocalizer<ListModel> Localizer
@{
    AppSettings.SiteRoot = Url.Content("~/");
    var img = $"{AppSettings.SiteRoot}themes/philosophy/images";
    var imgPlaceholder = $"{AppSettings.SiteRoot}admin/img/img-placeholder.png";

    var popular = await DataService.BlogPosts.GetPopular(new Pager(1, 4));
    var catsUnordered = await DataService.BlogPosts.Categories();
    var cats = catsUnordered.OrderByDescending(c => c.PostCount);
    var blog = await DataService.CustomFields.GetBlogSettings();
}
<!-- s-extra
================================================== -->
<section class="s-extra">

    <div class="row top">

        @if (popular.Any())
        {
            <div class="col-eight md-six tab-full popular">
                <h3>@Localizer["popular"]</h3>
                <div class="block-1-2 block-m-full popular__posts">
                    @foreach (var pop in popular)
                    {
                        <article class="col-block popular__post">
                            <a href="~/posts/@pop.Slug" class="popular__thumb">
                                <img src="~/@pop.Cover" alt="">
                            </a>
                            <h5><a href="~/posts/@pop.Slug">@pop.Title</a></h5>
                            <section class="popular__meta">
                                <span class="popular__author"><span>By</span> <a href="#0">@pop.Author.DisplayName</a></span>
                                <span class="popular__date"><span>on</span> <time>@pop.Published.ToFriendlyDateString()</time></span>
                            </section>
                        </article>
                    }
                </div>
            </div>
        }

        <div class="col-four md-six tab-full about">
            <h3>About @blog.Title</h3>
            <p>@blog.Description</p>
            <ul class="about__social">
                @foreach (var field in blog.SocialFields)
                {
                <li><a href="@field.Content"><i class="fa @field.Icon" aria-hidden="true"></i></a></li>
                }
            </ul>
        </div>

    </div> <!-- end row -->

    <div class="row bottom tags-wrap">
        @if (catsUnordered.Any())
        {
            <div class="col-full tags">
                <h3>@Localizer["tag", true]</h3>
                <div class="tagcloud">
                    @foreach (var cat in catsUnordered)
                    {
                        <a href="~/categories/@cat.Category">@cat.Category</a>
                    }
                </div>
            </div>
        }
    </div>

</section> <!-- end s-extra -->
<!-- s-footer
================================================== -->
<footer class="s-footer">

    <div class="s-footer__main">
        <div class="row">

            <div class="col-two md-four mob-full s-footer__sitelinks">
                <h4>@Localizer["quick-links"]</h4>
                <ul class="s-footer__linklist">
                    <li><a href="~/">@Localizer["home"]</a></li>
                    <li><a href="~/blog">@Localizer["blog"]</a></li>
                    <li><a href="~/admin">@Localizer["admin"]</a></li>
                </ul>
            </div> <!-- end s-footer__sitelinks -->

            <div class="col-two md-four mob-full s-footer__archives">
                <h4>@Localizer["categories", true]</h4>
                <ul class="s-footer__linklist">
                    @if (cats.Any())
                    {
                        var cnt = 1;
                        foreach (var cat in cats)
                        {
                            if (cnt < 6)
                            {
                                <li><a href="~/categories/@cat.Category">@cat.Category (@cat.PostCount)</a></li>
                            }
                            cnt++;
                        }
                    }
                </ul>
            </div> <!-- end s-footer__archives -->

            <div class="col-two md-four mob-full s-footer__social">
                <h4>@Localizer["social-accounts"]</h4>
                <ul class="s-footer__linklist">
                    @foreach (var field in blog.SocialFields)
                    {
                    <li><a href="@field.Content">@field.Title</a></li>
                    }
                </ul>
            </div> <!-- end s-footer__social -->

            <div class="col-five md-full end s-footer__subscribe">

                <h4>@Localizer["newsletter"]</h4>
                <p>@Localizer["join-subscribers"]</p>

                <h2 class="newsletter-title" id="ttlNewsletter" style="display:none">@Localizer["thank-you"]</h2>

                <div class="subscribe-form" id="frmNewsletter">
                    <form id="mc-form" class="group" novalidate>
                        <input type="email" id="txtEmail" name="txtEmail" value="" class="email" placeholder="@Localizer["enter-email"]" required="">
                        <input type="submit" name="subscribe" value="@Localizer["send"]" onclick="return subscribeClick();">
                        <label for="mc-email" class="subscribe-message"></label>
                    </form>
                </div>

            </div> <!-- end s-footer__subscribe -->

        </div>
    </div> <!-- end s-footer__main -->

    <div class="s-footer__bottom">
        <div class="row">
            <div class="col-full">
                <div class="s-footer__copyright">
                    <span>© Copyright @blog.Title @DateTime.Now.Year</span>
                    <span>Site Template by <a href="https://colorlib.com/">Colorlib</a></span>
                </div>

                <div class="go-top">
                    <a class="smoothscroll" title="Back to Top" href="#top"></a>
                </div>
            </div>
        </div>
    </div> <!-- end s-footer__bottom -->

</footer> <!-- end s-footer -->
<!-- preloader
================================================== -->
<div id="preloader">
    <div id="loader">
        <div class="line-scale">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>

<!-- Java Script
================================================== -->

<script src="~/themes/philosophy/js/jquery-3.2.1.min.js"></script>
<script src="~/themes/philosophy/js/plugins.js"></script>
<script src="~/themes/philosophy/js/main.js"></script>
<script src="~/themes/philosophy/js/newsletter.js"></script>

<partial name="~/Views/Shared/FooterScript.cshtml" />